<template>
  <CommonHead :userInfo="state.userInfo"/>
  <view class="content">
    <view class="head_top">
      <uni-icons type="left" size="30" style="margin-left: 20rpx;" @click="goToBack"></uni-icons>
      <view class="title">
        <view class="span">{{itemProps?.order_no}}</view>
        <view class="span span02">修改要求</view>
      </view>
    </view>
    <view class="line"></view>
    <CommonTitle  :isShowDing="false" :orderInfo="state.resultOrder"/>
    <view class="bottom" v-if="state.isStudent">
      <view class="botTitle">学生修改要求</view>
      <view class="msgMain">
        <view class="formItem" v-for="(subItem, index) in state.resultMsg?.content" :key="index">
          <view class="label">消息{{convertToChinese(index+1)}}</view>
          <view class="formItemRight">
            <uni-easyinput type="textarea" autoHeight :value="subItem" placeholder="请输入内容" :disabled="true"/>
          </view>
          <!-- <uni-icons type="minus" size="30" class="iconClose" color="rgba(254, 34, 34, 1)" ></uni-icons> -->
        </view> 
        <view class="submitBtn" @click="state.isStudent = false">回复</view>
      </view>
    </view>
      <view class="bottom" v-else>
        <view class="botTitle">老师回复</view>
        <view class="msgMain">
          <view class="formItem" v-for="(item, index) in state.teacherMsg" :key="index">
            <view class="label">消息{{convertToChinese(index+1)}}</view>
            <view class="formItemRight">
              <uni-easyinput type="textarea" autoHeight :value="item" placeholder="请输入内容" @blur="changeInput($event,index)"/>
            </view>
            <uni-icons type="minus" size="30" class="iconClose" color="rgba(254, 34, 34, 1)" v-if="state.teacherMsg?.length > 1" @click="deleteFun(index)"></uni-icons>
          </view> 
          <view class="addBtn" @click="clickAdd">+</view>
          <view class="submitBtn" @click="teacherHF">确认</view>
        </view>
      </view>
  </view>
  <TabBar :active="0"/>
</template>

<script setup>
  import { reactive } from 'vue';
  import TabBar from '@/components/tabBar.vue'
  import CommonHead from './components/head.vue'
  import CommonTitle from '@/components/commonTitle.vue'
  import { onShow, onLoad } from '@dcloudio/uni-app'
  import { getTeacherMsg, teacherSendMsg } from '@/utils/teacher.js'
  import { convertToChinese } from '@/utils/contanst.js'

  const state = reactive({
    userInfo: null,
    resultOrder: null,
    resultMsg: null,
    isStudent: true,
    teacherMsg: [""],
    orderId: null
  })
  onLoad(async(options) => {
    if (options?.itemProps) {
      const item = JSON.parse(options?.itemProps)
      state.orderId = item.id
      await getTeacherMsgList(item?.id)
    }
  })
  onShow(async() => {
    state.userInfo = uni.getStorageSync('userInfo')  
  })
  // 点击添加按钮
  const clickAdd = () => {
    console.log(71)
    state.teacherMsg.push('')
  }
  const changeInput = (e, index) => {
    state.teacherMsg[index] = e?.detail?.value
  }
  // 老师回复
  const teacherHF = () => {
    console.log(83, state.teacherMsg)
    if (state.teacherMsg.includes('')) {
      uni.showToast({
        title:'请输入老师回复内容~',
        icon: 'none'
      })
      return
    }
    let params = {
      content: state.teacherMsg,
      order_id: state.orderId
    }
    teacherSendMsg(params).then((res) => {
      if(res?.code == 1){
        uni.navigateBack()
      }
    })
  }
  // 删除消息
  const deleteFun = (index) => {
    state.teacherMsg.splice(index, 1)
    console.log(80, state.teacherMsg)
  }
  const getTeacherMsgList = (id) => {
    getTeacherMsg({id}).then((res) => {
      if (res?.code == 1) {
        console.log(77, res)
        state.resultOrder = res?.result?.order
        state.resultMsg = res?.result?.message
      }
    })
  }
  const tabChange = (item) => {
    state.tabId = item.id
  }
  const goToBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 714rpx;
    height: 1100rpx;
    border-radius: 14rpx;
    background: rgba(247, 247, 247, 1);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20rpx;
    margin-bottom: 140rpx;
    overflow-y: scroll;
    .head_top{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
    }
    .title{
      width: 564rpx;
      height: 76rpx;
      border-radius: 6rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: rgba(209, 243, 241, 1);
      // margin-top: 30rpx;      
      .span{
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: rgba(54, 54, 54, 1);
        margin-left: 30rpx;
      }
      .span02{
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(60, 60, 60, 1);
        margin-left: 60rpx;
      }
    }
    .line{
      border-bottom: 2rpx dashed rgba(146, 146, 146, 1);
      width: 664rpx;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
    .bottom{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .botTitle{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: rgba(101, 115, 233, 1);
      }
      .msgMain{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:30rpx;
        .formTitle{
          width: 100%;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: rgba(101, 115, 233, 1);
        }
        .formItem{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-top: 20rpx;
          .label{
            width: 90rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(122, 122, 122, 1);
            height: 100%;
          }
          .formItemRight{
            width: 444rpx;
            height: 214rpx;
            overflow: scroll;
          }
        }
        .addBtn{
          width: 362rpx;
          height: 72rpx;
          border-radius: 14rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.28);
          background: rgba(231, 231, 231, 0.59);
          color: rgba(146, 146, 146, 1);
          font-size: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .submitBtn{
          width: 248rpx;
          height: 74rpx;
          border-radius: 6rpx;
          background: rgba(255, 11, 11, 0.28);
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 48rpx;
          color: rgba(58, 58, 58, 0.68);
          margin-top: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>